<template>
    <div class="header">
        <div class="icon">
            <span class="nav" @click="Collapse">
                <NuxtImg src="/img/navicon.png" alt="" />
            </span>
            <NuxtImg class="logo" src="/img/logo.gif" alt="" />
        </div>
        <ClientOnly>
            <div class="btn">
                <el-icon class="search" @click="store.$patch({searchBox:true})" color="#fff" size="16">
                    <Search />
                </el-icon>
                <template v-if="token != '' && token != null && token != undefined">
                    <el-dropdown popper-class="dropdown" @command="command" trigger="click">
                        <div class="price">
                            <template v-if="coinType == 'BRL'">
                                <div>
                                    <NuxtImg src="/img/mylrft.png" alt="" />
                                    <span>R$ {{ $dot(coininfo[coinType.toLowerCase()]?.totalCoins) }}</span>
                                </div>
                            </template>
                            <template v-else>
                                <div>
                                    <NuxtImg src="/img/t1.png" alt="" />
                                    <span>USDT {{ $dot(coininfo[coinType.toLowerCase()]?.totalCoins) }}</span>
                                </div>
                            </template>
                            <el-icon color="#fff" size="14">
                                <Plus />
                            </el-icon>
                        </div>
                        <template #dropdown v-if="coininfo?.brl">
                            <div class="tipsdropdown" :class="istouch ? 'opcity' : ''" @touchmove="distance">
                                <span>{{ $t("language.My.selectTips") }}</span>
                                <el-icon>
                                    <QuestionFilled />
                                </el-icon>
                            </div>
                            <el-dropdown-menu class="dropdown">
                                <el-dropdown-item command="BRL">
                                    <div class="itemdropdown" :class="coinType == 'BRL' ? 'activedown' : ''">
                                        <NuxtImg src="/img/mylrft.png" alt="" />
                                        <strong>BRL</strong>
                                        <div> {{ $dot(coininfo['brl']['totalCoins']) }}</div>
                                    </div>
                                </el-dropdown-item>
                                <el-dropdown-item command="USDT">
                                    <div class="itemdropdown" :class="coinType == 'USDT' ? 'activedown' : ''">
                                        <NuxtImg src="/img/t1.png" alt="" />
                                        <strong>USDT</strong>
                                        <div> {{ $dot(coininfo['usdt']?.totalCoins) }}</div>
                                    </div>
                                </el-dropdown-item>
                                <el-button class="money" @click="$openPage('/user/wallet')">{{
                $t("language.nav.moenydetail")
            }}</el-button>

                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                    <div class="rechangesss" @click="openTan('rechange')">{{ $t('language.rechange.title1') }}</div>
                    <div class="withdrawal" @click="openTan('withdrawal')">{{ $t('language.withdrawal.title1') }}</div>
                    <div class="head" @click.stop="opentopnav">
                        <NuxtImg :src="avatar" alt="" />
                        <div>
                            <p>{{ userinfo.nickName }}</p>
                            <div>
                                <NuxtImg src="/img/my.png" alt="" />
                                <span>VIP{{ userinfo.vip }}</span>
                            </div>
                        </div>
                    </div>
                </template>

                <template v-if="token == '' || token == null || token == undefined">
                    <div id="login" @click="openLogin('login')">{{ $t('language.login') }}</div>
                    <div id="registe" @click="openLogin('eroll')">{{ $t('language.register') }}</div>
                </template>
                <template v-if="Object.keys(lang).length != 0">
                    <div class="downmenu" tabindex="0">
                        <NuxtImg @click.stop="store.$patch({ langAppear: !langAppear })" :src="lang.img" alt="" />
                        <ul :class="langAppear ? 'appear' : ''">
                            <li v-for="(item, index) in coutry" @click="chooseLang(item)" :key="index">
                                <NuxtImg :src="item.img" alt="" />
                                <span>{{ item.name }}</span>
                            </li>
                        </ul>
                    </div>
                </template>

            </div>
        </ClientOnly>

    </div>
</template>
<script setup lang="ts">
import { QuestionFilled, Search, Plus } from '@element-plus/icons-vue'
import { ref, reactive, computed } from "vue"
import { useI18n } from "vue-i18n";
const { t, locale } = useI18n();
let emit = defineEmits(['openSearch'])
let props = defineProps({
    search: {
        type: Boolean,
        default: false
    }
})
// 切换语言
let langAppear = computed(() => store.langAppear)


// 获取本地头像

const store = useStore()
let avatar = computed(() => store.avatar)
let openTan = (dialog: string) => {
    dialog == 'withdrawal' ? store.withdrawal = true : store.rechange = true
    store.$patch({ rechangeType: 2 })
}
// 打开头像菜单栏
let opennav = computed(() => store.topnavopen)
let opentopnav = () => {
    store.$patch({ topnavopen: !opennav.value })
}
//获取用户信息
let userinfo = computed(() => store.userinfo)
// let locallang=localStorage.getItem('lang')
// console.log(locallang,'locallang');

//打开登录弹窗
//本地存储方案一
// let Loginopen: any = useLoginopen()
// let Loginoreroll: any = useLoginoreroll()
// let openLogin = (val: string) => {
//     Loginoreroll.value = val
//     Loginopen.value = true
// }
// let token = useToken()
// //金钱信息
// let coinType = useCointype()
// let coininfo: any = useCoininfo()
//本地存储方案二

let openLogin = (val: string) => {
    store.$state.loginoreroll = val
    store.$state.loginopen = true
}
let token = computed(() => store.token)
let coinType = computed(() => store.cointype)
let coininfo: any = computed(() => store.coininfo)
//搜索
let openSearch = () => {
    emit('openSearch', true)
}
//滑动
let istouch = ref(false)
let distance = () => {
    istouch.value = true
}
//命令
let command = (val: string) => {
    store.cointype = val
};
//是否展示下拉窗体
let appear = shallowRef<boolean>(false)
const coutry = reactive([
    {
        img: "/img/guoqi_01.png",
        name: "English",
        lang: "en",
    },
    {
        img: "/img/guoqi_02.png",
        name: "中文(简)",
        lang: "English",
    },
    {
        img: "/img/guoqi_03.png",
        name: "Portugues do Brasil",
        lang: "pt",
    },
    {
        img: "/img/guoqi_04.png",
        name: "Indonesia",
        lang: "id",
    },
    {
        img: "/img/guoqi_05.png",
        name: "日本語",
        lang: "ja",
    },
    {
        img: "/img/guoqi_06.png",
        name: "한국어",
        lang: "ko",
    },
    {
        img: "/img/guoqi_07.png",
        name: "ภาษาไทย",
        lang: "th",
    },
    {
        img: "/img/guoqi_08.png",
        name: "Tiếng Việt",
        lang: "vi",
    },
]);

//是否折叠菜单
// 本地存储方案一
// let isCollapse = useIsCollapse()
// let Collapse = () => {
//     isCollapse.value = !isCollapse.value
// }
// 本地存储方案二

let Collapse = () => {
    store.IsCollapse = !store.IsCollapse
    store.$patch({searchBox:false})
    // console.log(store.IsCollapse, 9000);
}

let lang: any = computed(() => store.lang)
let chooseLang = (item: any) => {
    store.$patch({ lang: item })
    locale.value = item.lang;
    // console.log(store.lang, 'jssdj');

}
</script>
<style lang="scss">
.el-dropdown-menu__item:not(.is-disabled):focus {
    background-color: rgb(39, 42, 48);

    strong {
        color: #fff;
    }

    div {
        color: #fff;
    }

}

.dropdown .el-scrollbar__wrap {
    width: 250px !important;
    border: none !important;
}

.dropdown .el-popper {
    border: none !important;
}

.dropdown .el-dropdown__list {
    box-shadow: none !important;
    border: none !important;
}

.dropdown .el-scrollbar__view {
    box-shadow: none !important;
    border: none !important;
}

.dropdown .el-scrollbar {
    box-shadow: none !important;
    border: none !important;
}

.el-scrollbar__view .dropdown .el-scrollbar,
.dropdown .el-scrollbar__view,
.dropdown .el-dropdown__list,
.dropdown .el-dropdown__list,
.dropdown .el-popper__arrow::before,
.dropdown .el-popper {
    background-color: rgb(50, 53, 62) !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 4px !important;
    outline: none !important;
}

.el-dropdown-menu,
.dropdown {
    background-color: rgb(50, 53, 62) !important;
    box-shadow: none !important;
}



.tipsdropdown {
    font-size: 14px !important;
    color: #b5bac8 !important;
    height: 36px;
    padding: 0px 20px !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    opacity: 1;
    transition: all 0.3s;

    span {
        display: block;
        margin-right: 5px;
        color: #fff
    }
}

.opcity {
    opacity: 0;
}

.dropdown .el-dropdown-menu__item {
    border-bottom: 1px solid #4a4c53 !important;
    padding: 8px 20px !important;
}

.dropdown .el-dropdown-menu__item:nth-child(3) {
    border: none;
}

.itemdropdown {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;

    img {
        width: 16px !important;
        margin-right: 5px;
    }

    strong {
        font-size: 16px;
        font-weight: normal;
        color: #b5bac8;
        display: block;
        flex: 1;

    }

    >div {
        display: block !important;
        width: 60%;
        text-align: right !important;
        color: #b5bac8;
    }
}

.activedown {
    strong {
        color: #fff !important;
    }

    >div {
        color: #fff !important;
    }
}
</style>
<style lang="scss">
.header .btn {
    .el-dropdown-menu.el-popper {
        background: #2d3135 !important;
        border-color: #2d3135 !important;
        padding: 10px 0 !important;
    }
}
</style>
<style scoped lang="scss">
.money {
    display: block;
    margin: 10px auto 20px;
    height: 36px;
    color: #fff;
    background-color: #0a906c !important;
    border: none;
}

.header {
    height: 100%;
    width: 100%;
    padding: 0 15px;
    position: relative;
    @include flex(row, space-between, center);
    background-color: rgb(36, 39, 43);
    cursor: pointer;

    .isCollapse {
        width: calc(100vw - 212px);
        left: 212px;
        top: 60px;
    }

    .icon {
        @include flex(row, flex-start, center);

        .nav {
            width: 35px;
            height: 35px;
            background-color: #2d3035;
            display: block;
            border-radius: 17.5px;
            @include flex(row, center, center);
            margin-right: 15px;
            cursor: pointer;

            img {
                width: 20px;
            }
        }

        .logo {
            height: 45px;
        }
    }

    .btn {
        .search {
            margin-right: 30px;
            font-weight: bolder !important;
            cursor: pointer;
        }

        .rechangesss {
            height: 36px;
            width: 120px;
            color: #fff;
            background-color: #069dfc;
            font-size: 12px;
            cursor: pointer;
            border-radius: 18px;
            text-align: center;

            line-height: 36px;
            margin-left: 20px;
        }

        .head {
            @include flex(row, flex-start, center);

            >img {
                width: 38px;
                margin-right: 10px;
                border-radius: 19px;
            }

            >div {
                margin-right: 25px;

                p {
                    font-size: 12px;
                    color: #fff;
                }

                div {
                    width: 55px;
                    height: 17px;
                    margin: 5px 0 0 10px;
                    @include flex(row, flex-start, center);
                    background-color: #fff;
                    border-radius: 8.5px;

                    img {
                        width: 25px;
                        height: 24px;
                        margin-left: -10px;
                    }

                    span {
                        font-size: 12px;
                        color: #0c186c;
                    }
                }
            }
        }

        .withdrawal {
            height: 36px;
            width: 120px;
            border-radius: 18px;
            color: #fff;
            background: #0a906c;
            font-size: 12px;
            margin: 0 10px 0 20px;
            text-align: center;
            cursor: pointer;
            line-height: 36px;
        }

        #login {
            height: 36px;
            width: 120px;
            color: #fff;
            background-image: linear-gradient(-30deg, #259a06, #3bc117), linear-gradient(#2d3035, #2d3035);
            font-size: 12px;
            text-align: center;
            line-height: 36px;
            border-radius: 4px;
            margin-right: 20px;
            cursor: pointer;
        }

        #registe {
            height: 36px;
            width: 120px;
            font-size: 12px;
            text-align: center;
            line-height: 36px;
            color: #fff;
            cursor: pointer;
            border-radius: 4px;
            background: url('assets/img/erollbg.gif') no-repeat;
            background-size: 100% 100%;
            margin-right: 20px;
        }


        @include flex(row, flex-end, center);

        .price {
            height: 30px;
            margin: 13px 0;
            outline: none;
            cursor: pointer;
            background-color: rgb(49, 53, 62);
            border-radius: 5px;
            @include flex(row, space-between, center);
            padding: 0 10px;

            div {
                @include flex(row, flex-start, center);

                img {
                    width: 16px;
                    margin-right: 5px;
                }

                span {
                    font-size: 14px;
                    color: #fff;
                    display: block;
                    margin-right: 5px;
                }
            }
        }






        .downmenu {
            position: relative;
            cursor: pointer;
            outline: none;

            .appear {
                opacity: 1;
                transform: scaleY(1);
                cursor: pointer;
            }

            // &:focus {
            //     ul {
            //         opacity: 1;
            //         height: 310px;
            //         cursor: pointer;
            //     }
            // }

            ul {
                z-index: 88;
                transition: all 0.15s ease-out;
                width: 240px;
                height: 310px;
                transform: scaleY(0);
                overflow: hidden;
                opacity: 0;
                background: #2d3135;
                border-color: #2d3135;
                padding: 10px 0;
                position: absolute;
                right: 0px;
                top: 60px;
                border-radius: 5px;
                transform-origin: left top;

                li {
                    &:hover {
                        color: #fff;
                        background-color: #232629;
                        cursor: pointer;
                    }

                    cursor: pointer;
                    padding: 3px 20px;
                    @include flex(row, flex-start, center);
                    color: #b5bacb;
                    font-size: 14px;


                    img {
                        margin-right: 10px;
                    }
                }


            }

            img {
                width: 30px;
            }
        }


    }
}
</style>